<template>
    <!-- 商品列表 -->
    <view class="product-list">
        <view
            v-for="(product, index) in products"
            :key="index"
            class="product-item"
            @click="goToDetail(product.id)"
        >
            <view class="product-header">
                <text class="tag" v-if="product.tag">{{ product.tag }}</text>
                <image
                    class="product-img"
                    :src="product.image"
                    mode="aspectFill"
                    >{{ product.image }}</image
                >
            </view>
            <view class="product-info">
                <view class="title">{{ product.title }}</view>
                <view class="price">￥{{ product.price }}</view>
                <view class="sales">{{ product.sales }}人付款</view>
                <view class="shop-info">
                    <text class="freight">{{ product.freight }}</text>
                    <p class="shop-information">
                        <text class="shop-news">{{ product.new }}</text>
                        <text class="shop-name">{{ product.shop }}</text>
                    </p>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref(0);

// 商品数据
const products = ref([
    {
        id: 1,
        tag: '618大促',
        title: '汉服 汉旭原创汉服女战国袍团锦',
        price: '70',
        sales: '40',
        new: '本月上新2件',
        shop: '汉旭汉服旗舰店',
        freight: '每200减30 春上新 包邮',
        image: '../../static/shop/product1.png'
    },
    {
        id: 2,
        tag: '关注 领取新款',
        title: '落花赋 【渡清欢】魏晋复原女款汉服',
        price: '178',
        sales: '400',
        new: '八年老店',
        shop: '落花赋原创汉服',
        freight: '每200减30 退货宝 包邮',
        image: '../../static/shop/product2.jpg'
    },
    {
        id: 3,
        tag: '618大促',
        title: '汉服 汉旭原创汉服女战国袍团锦',
        price: '70',
        sales: '40',
        new: '本月上新2件',
        shop: '汉旭汉服旗舰店',
        freight: '每200减30 春上新 包邮',
        image: '../../static/shop/product1.png'
    },
    {
        id: 4,
        tag: '领取新款',
        title: '落花赋 【渡清欢】魏晋复原女款汉服',
        price: '178',
        sales: '400',
        new: '八年老店',
        shop: '落花赋原创汉服',
        freight: '每200减30 退货宝 包邮',
        image: '../../static/shop/product2.jpg'
    }
]);

// 切换商品分类
const changeTab = (index) => {
    activeTab.value = index;
    // 对应分类商品的逻辑
};

// 跳转商品详情
const goToDetail = (id) => {
    uni.navigateTo({ url: `/pages/product/detail?id=${id}` });
};
</script>

<style lang="scss">
.product-list {
    display: flex;
    flex-wrap: wrap;
    padding: 20rpx 15rpx;

    .product-item {
        width: 48%;
        margin: 1%;
        background-color: #fff;
        border-radius: 16rpx;
        overflow: hidden;
        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

        .product-header {
            position: relative;

            .tag {
                position: absolute;
                top: 10rpx;
                left: 10rpx;
                background-color: #e74c3c;
                color: #fff;
                font-size: 20rpx;
                padding: 4rpx 10rpx;
                border-radius: 20rpx;
                z-index: 1;
            }

            .product-img {
                width: 100%;
                height: 300rpx;
            }
        }

        .product-info {
            padding: 20rpx;

            .title {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
            }

            .price {
                font-size: 32rpx;
                color: #e74c3c;
                font-weight: bold;
                margin-bottom: 8rpx;
            }

            .sales {
                font-size: 24rpx;
                color: #999;
                margin-bottom: 5rpx;
            }

            .shop-info {
                display: flex;
                flex-direction: column;
                align-content: space-between;
                font-size: 24rpx;

                .freight {
                    color: #999;
                }

                .shop-information {
                    padding: 2px 6px;
                    display: flex;
                    justify-content: space-between;
                    background-color: #ebebeb;
                    border-radius: 10px;

                    .shop-news {
                        color: #e74c3c;
                        font-weight: bold;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    .shop-name {
                        color: #666;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                }
            }
        }
    }
}
</style>
